import type { Metadata } from "next";
import "./globals.css";
import { TimeProvider } from "@/context/TimeContext";
import { DataProvider } from "@/context/DataContext";
import TimeController from "@/app/components/TimeController";
import { WeatherProvider } from "@/context/WeatherContext";

export const metadata: Metadata = {
  title: "共享单车多视图分析系统",
  description: "DSAA5024 Course Project",
};

function TopNavBar() {
  return (
    <header className="absolute top-0 left-0 right-0 z-10 h-16 flex items-center px-6 bg-gray-900 bg-opacity-50 backdrop-blur-sm border-b border-gray-700">
      <div className="text-xl font-bold text-gray-100">
        共享单车多视图分析系统
      </div>
      <nav className="ml-10">
        <a href="#" className="px-3 py-2 text-gray-300 rounded-md hover:bg-gray-700 hover:text-white">主视图</a>
        <a href="#" className="px-3 py-2 text-gray-300 rounded-md hover:bg-gray-700 hover:text-white">数据报表</a>
      </nav>
      <div className="ml-auto flex items-center gap-8">
        <TimeController />
      </div>
    </header>
  );
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TimeProvider>
          <DataProvider>
            <WeatherProvider>
              <div className="relative w-screen h-screen">
                <TopNavBar />
                <main className="w-full h-full pt-16">
                  {children}
                </main>
              </div>
            </WeatherProvider>
          </DataProvider>
        </TimeProvider>
      </body>
    </html>
  );
}